<template>
	<!-- 二手发布 -->
	<view class="SecondHandRelease">
		<view class="empty"></view>
		<view class="main">
			<view class="main-title">
				<text>标题</text>
				<input type="text" placeholder="商品标题、品牌型号可以帮助搜索" v-model="form.title">
			</view>
			<view class="main-describe">
				<view class="main-describe-top">
					<text>描述</text>
					<textarea name="" v-model="form.desc" placeholder="详细描述商品的购买详情、使用情况及出售原因能够更快的出售商品哟～"></textarea>
				</view>
				<view class="main-describe-bottom">
					<Uploading @change="onImgChange"></Uploading>
				</view>
			</view>
			<view class="main-item">
				<view class="main-item-left">
					{{ form.role == 1 ? '价格' : '预算' }}
				</view>
				<view class="main-item-right">
					<input type="number" placeholder="输入价格" v-model="form.price">
				</view>
			</view>
			<view class="main-item">
				<view class="main-item-left">
					交易方式
				</view>
				<view class="main-item-right">
					<picker>
						线下
					</picker>
				</view>
			</view>
			<view class="main-item">
				<view class="main-item-left">
					新旧程度
				</view>
				<view class="main-item-right">
					<view :class="form.tags == item ? 'selected' : 'main-item-right-item'" v-for="(item, index) in NewAndOldDegree"
						:key="index" @click="eventSelect(item)">
						{{ item }}
					</view>
				</view>
			</view>
			<view class="main-item">
				<view class="main-item-left">
					联系方式
				</view>
				<view class="main-item-right">
					<input type="number" placeholder="输入联系方式" v-model="form.mobile">
				</view>
			</view>
		</view>
		<view class="footer-button">
			<button @click="eventtitle">发布</button>
		</view>
	</view>
</template>

<script>
import Uploading from '@/components/Uploading/index.vue'
const $api = require('@/utils/request.js').API
export default {
	components: {
		Uploading
	},
	data() {
		return {
			// 新旧程度
			NewAndOldDegree: ['全新', '九成', '七成', '其他'],
			form: {
				title: '',	// 标题
				desc: '',	// 描述
				price: '',	// 价格
				tags: '全新',//新旧程度
				mobile: '',	// 联系方式
				mode: 1,//交易方式,  线下
				image: '',//图片
			},
		}
	},
	methods: {
		// 监听上传图片
		onImgChange(list) {
			this.form.image = list.join()
		},


		// 新旧程度
		eventSelect(item) {
			this.form.tags = item
		},
		// 发布
		eventtitle() {
			$api.secondhandAdd(this.form).then(res => {
				uni.navigateBack({
					delta: 1
				});
			})
		}
	}
}
</script>

<style lang="less" scoped>
.SecondHandRelease {
	background: #FBFBFB;

	.empty {
		height: 21rpx;
	}

	.main {
		width: 690rpx;
		margin: auto;

		.main-title {
			display: flex;
			align-items: center;
			width: 690rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 0 34rpx 0 39rpx;

			text {
				display: inline-block;
				width: 100rpx;
			}

			input {
				width: 100%;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				// color: #858585;
			}
		}

		.main-describe {
			width: 690rpx;
			height: 382rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-top: 12rpx;
			padding: 35rpx 34rpx 0 39rpx;

			.main-describe-top {
				display: flex;

				text {
					display: inline-block;
					width: 100rpx;
				}

				textarea {
					width: 100%;
					height: 150rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					// color: #858585;
					// opacity: 0.8;
				}
			}

			.main-describe-bottom {
				padding-top: 60rpx;
			}
		}

		.main-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 690rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-top: 12rpx;
			padding: 0 34rpx 0 33rpx;

			.main-item-left {}

			.main-item-right {
				display: flex;
				text-align: right;

				.selected {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 92rpx;
					height: 38rpx;
					border: 1px solid #F14500;
					color: #F14500;
					border-radius: 19rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					margin-left: 16rpx;
				}

				.main-item-right-item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 92rpx;
					height: 38rpx;
					border: 1px solid #D4D4D4;
					border-radius: 19rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #91908F;
					margin-left: 16rpx;
				}
			}
		}
	}

	.footer-button {
		padding-top: 290rpx;

		button {
			width: 702rpx;
			height: 98rpx;
			background: #F14500;
			border-radius: 49rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 98rpx;
		}
	}
}
</style>